---
title: Recipes
description: This page provides common test recipes for different react-md components. It includes things like finding specific components, changing values, and more.
docType: Guides
docGroup: Testing
group: Recipes
---

import AutocompleteFindAndChangeValue from "./AutocompleteFindAndChangeValue.jsx";
import AutocompleteFindAndChangeValueThroughSuggestions from "./AutocompleteFindAndChangeValueThroughSuggestions.jsx";
import CheckboxFindAndChangeValue from "./CheckboxFindAndChangeValue.jsx";
import DialogFindAndToggleVisibility from "./DialogFindAndToggleVisibility.jsx";
import ExpansionPanelFindAndVerifyExpansion from "./ExpansionPanelFindAndVerifyExpansion.jsx";
import FileInputFindAndChangeValue from "./FileInputFindAndChangeValue.jsx";
import MenuItemCheckbox from "./MenuItemCheckbox.jsx";
import MenuItemFileInput from "./MenuItemFileInput.jsx";
import MenuItemRadio from "./MenuItemRadio.jsx";
import MenuItemSwitch from "./MenuItemSwitch.jsx";
import MenuOpenAndClickAMenuItem from "./MenuOpenAndClickAMenuItem.jsx";
import RadioFindAndChangeValue from "./RadioFindAndChangeValue.jsx";
import RangeSliderFindAndChangeValue from "./RangeSliderFindAndChangeValue.jsx";
import SelectFindAndChangeValue from "./SelectFindAndChangeValue.jsx";
import SelectVerifyTheDisplayValue from "./SelectVerifyTheDisplayValue.jsx";
import SliderFindAndChangeValue from "./SliderFindAndChangeValue.jsx";
import SwitchFindAndToggle from "./SwitchFindAndToggle.jsx";
import TabVerifySelectedTabAndChangeTabs from "./TabVerifySelectedTabAndChangeTabs.jsx";
import TooltipFindAndVerifyTooltip from "./TooltipFindAndVerifyTooltip.jsx";
import TreeFindAndVerifyExpansion from "./TreeFindAndVerifyExpansion.jsx";
import TreeFindAndVerifySelectedItems from "./TreeFindAndVerifySelectedItems.jsx";

# Recipes

This page will provide common testing recipes for components through ReactMD.

> !Warn! All examples assume that fake timers are not enabled. Enable at your
> own debugging risk!

## Inputs

### Autocomplete

The following examples will use the [Autocomplete Simple Example](/components/autocomplete#simple-example)
code.

#### Autocomplete Parts

The `Autocomplete` is broken up into a few accessible roles that can be found:

- `"combobox"` - The main `TextField`
- `"listbox"` - The popup menu of suggestions
- `"option"` - The available suggestions in the popup menu

#### Find and Change Value

For simple tests, it is recommended just to update the `Autocomplete` like
a normal `TextField` using `user.type()` or `fireEvent.change()`

<AutocompleteFindAndChangeValue />

#### Find and Change Value Through Suggestions

If the test needs to verify specific suggestions are visible, filtering
behavior, or anything else, open the listbox and select an option to change the
value.

<AutocompleteFindAndChangeValueThroughSuggestions />

### Checkbox

#### Find and Change Value

The `Checkbox` can be found like any other checkbox element:

<CheckboxFindAndChangeValue />

### FileInput

#### Find and Change Value

The `FileInput` can be found like any other `<input type="file">` and updated
using the [upload utility](https://testing-library.com/docs/user-event/utility#upload)

<FileInputFindAndChangeValue />

### Radio

#### Find and Change Value

The `Radio` can be found like any other radio element:

<RadioFindAndChangeValue />

### Select

The following examples will use the [Simple Select](/components/select#simple-select) code.

#### Find and Change Value

This example showcases how to:

- find the `Select` component
- find and verify the current selected option
- change the selected option

<SelectFindAndChangeValue />

#### Verify the Display Value

The `Select` display value cannot be found using a normal query and instead
can be found as the `container.getByRole("combobox", { name: "LABEL" }).firstElementChild`.

ReactMD provides React Testing Library queries named
[getSelectTestElements](/testing/queries#getSelectTestElements)
and
[findSelectTestElements](/testing/queries#findSelectTestElements)
to find the important `Select` element parts with the correct type definitions.

<SelectVerifyTheDisplayValue />

### Slider

#### Find and Change Value

Tests including the `Slider` are generally setup to include verifying the
current value and optionally changing it. The slider element can be found
using `screen.getByRole("slider", { name: "THE_SLIDER_LABEL" })` which can
be used to verify the current numeric value and update through touch, drag,
or keyboard events.

Since updating through touch, drag, or keyboard events aren't convenient for
tests, it's recommended to find the hidden `<input type="range" />` and trigger
a change event on that instead and could be found by
`screen.getByRole("slider", { name: "THE_SLIDER_LABEL", hidden: true })`.

ReactMD provides React Testing Library queries named
[getSliderTestElements](/testing/queries#getSliderTestElements)
and
[findSliderTestElements](/testing/queries#findSliderTestElements)
that can be used to get the `slider` element and the `sliderInput`.

<SliderFindAndChangeValue />

#### Find and Change Value (Range Slider)

ReactMD provides additional React Testing Library queries named
[getRangeSliderTestElements](/testing/queries#getRangeSliderTestElements)
and
[findRangeSliderTestElements](/testing/queries#findRangeSliderTestElements)
that can be used for a range slider. It will return the `minSlider`,
`minSliderInput`, `maxSlider`, and `maxSliderInput` allowing the values to be
verified like the normal slider.

<RangeSliderFindAndChangeValue />

### Switch

#### Find and Toggle

The `Switch` is an extension of an `<input type="checkbox">` with
`role="switch"`, so the element can be changed just like a `Checkbox`.

<SwitchFindAndToggle />

## Presentation

### Tooltip

#### Find and Verify Tooltip

A tooltip can be found using using `.getByRole("tooltip")` or
`.findByRole("tooltip")` along with the `hover` event:

> !Success! This example will also work with custom `useTooltip` usage and by
> changing the button to the tooltipped element.

<TooltipFindAndVerifyTooltip />

## Navigation

### Menu

#### Open and Click a `MenuItem`

<MenuOpenAndClickAMenuItem />

#### MenuItemCheckbox

The `MenuitemCheckbox` can be found using the `"menuitemcheckbox"` role:

<MenuItemCheckbox />

#### MenuItemFileInput

The `MenuItemFileInput` does not render an `<input type="file">` in the DOM, and instead
dynamically creates the input when the menu item is clicked. To help test this flow,
use the `uploadMenuItemFileInput` from
[@react-md/core/test-utils/jest-globals]($GITHUB/packages/core/src/test-utils/jest-globals/uploadMenuItemFileInput.ts)
or
[@react-md/core/test-utils/vitest]($GITHUB/packages/core/src/test-utils/vitest/uploadMenuItemFileInput.ts):

<MenuItemFileInput />

#### MenuItemRadio

The `MenuItemRadio` can be found using the `menuitemradio` role:

<MenuItemRadio />

#### MenuItemSwitch

The `MenuItemSwitch` can be found using the `"menuitemcheckbox"` role:

<MenuItemSwitch />

### Tabs

#### Verify Selected Tab and Change Tabs

Each tab can be found by using the `"tab"` role while the tab panel can be
found using the `"tabpanel"` role. The inactive tab panels are hidden using
`display: none` by default so the visibility can be tested using the
[isElementVisible util](#%EF%B8%8F-iselementvisible-util).

This test uses the [Tabs Simple Example](/components/tabs#simple-example).

<TabVerifySelectedTabAndChangeTabs />

### Tree

The following examples use the [Single Select Tree Example](/components/tree#single-select-tree).

#### Find and Verify Selected Items

The top-level tree can be found using the `"tree"` role and each item with `"treeitem"`:

<TreeFindAndVerifySelectedItems />

#### Find and Verify Expansion

Unless the `temporaryChildItems` props are enabled, all tree items will be
rendered but hidden using `display: none`. The expansion state can be verified
using the `aria-expanded` attribute on the tree item or using the
`isElementVisible` util with each subtree group.

<TreeFindAndVerifyExpansion />

## Feedback

### Dialog/Sheet

#### Find and Toggle Visibility

Both the `Dialog` and `Sheet` can be found using the `"dialog"` role or `"alertdialog"` when
the `modal` prop is enabled. Here's a simple test flow for the
[Simple Dialog Example](/components/dialog#simple-example).

<DialogFindAndToggleVisibility />

## Layout

### Expansion Panel

The following examples use the [Expansion Panel Group Example](/components/expansion-panel#expansion-panel-group).

#### Find and Verify Expansion

Each expansion panel can be found using the `"button"` role while the panel
contents can be found using the `"region"` role. The collapsed panel contents
are hidden using `display: none` by default so the visibility can be tested
using the [isElementVisible util](#%EF%B8%8F-iselementvisible-util).

<ExpansionPanelFindAndVerifyExpansion />

## ⚠️ isElementVisible util

> !Warn! The `isElementVisible` util really only verifies that the element or
> any parent elements do not contain the `"rmd-display-none"` class. A custom
> util will be required for components not apart of `react-md` or custom
> styling to hide elements.
